import React, { Component, PureComponent } from "react";
import Swiper from "swiper/swiper-bundle.js";
import "swiper/swiper-bundle.css";
import "./index.less";

var mySwiper;
export default class Swiper1 extends PureComponent {
  coursel = null;

  componentDidMount() {
    this.initSwiper();
    let timer = setTimeout(() => {
      if (this.coursel) {
        let slides = this.coursel.querySelectorAll(".swiper-slide");
        for (const item of slides) item.style.transition = ".3s ease-in";
        clearTimeout(timer);
      }
    }, 0);
  }

  initSwiper() {
    mySwiper = mySwiper = new Swiper(".swiper-container", {
      slidesPerView: 2,
      //   spaceBetween: 30,
      loop: true,
      centeredSlides: true,
      effect: "coverflow",
      coverflowEffect: {
        rotate: -10,
        stretch: 10,
        depth: 150,
        modifier: 2,
        slideShadows: true,
      },
      pagination: {
        el: ".swiper-pagination",
        bulletElement: "li",
        clickable: true,
      },
      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  }

  render() {
    return (
      <div className={"coursel2"} ref={(coursel) => (this.coursel = coursel)}>
        <div className="swiper-container">
          <div className="swiper-wrapper">
            <div className="swiper-slide">Slide 1</div>
            <div className="swiper-slide">Slide 2</div>
            <div className="swiper-slide">Slide 3</div>
            <div className="swiper-slide">Slide 4</div>
            <div className="swiper-slide">Slide 5</div>
          </div>
          <div className="swiper-pagination"></div>
        </div>
      </div>
    );
  }
}
